<template>
	<div id="overview">
		<div class="company-header column">
      <van-row>
        <van-col span="4">
          <img src="@/assets/logo.png" alt="">
        </van-col>
        <van-col span="20">
          <p>浙江杭州法兰特超声波科技服务有限公司</p>
          <p>
            <van-tag class="blue">客</van-tag>
            <van-tag class="green">内</van-tag>
            <van-tag class="purple">商</van-tag>
            <van-tag>标签</van-tag>
          </p>
          <p><span>经营范围：</span>各类工程建设活动；建设工程勘察；…</p>
        </van-col>
      </van-row>
      <van-row class="column-3">
        <van-col span="8">
          <p>法定代表人</p>
          <p>张大仙</p>
        </van-col>
        <van-col span="8">
          <p>注册资本</p>
          <p>张大仙</p>
        </van-col>
        <van-col span="8">
          <p>成立日期</p>
          <p>张大仙</p> 
        </van-col>
      </van-row>
    </div>
    <div class="abstract column">
      <h2 class="column-title">概要信息</h2>
      <div class="column-box">
        <van-row>
          <van-col span="12">
            <p>企业类型</p>
            <p>企业类型</p>
          </van-col>
          <van-col span="12">
            <p>统一社会信用代码</p>
            <p>企业类型</p>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <p>实缴资本</p>
            <p>企业类型</p>
          </van-col>
          <van-col span="12">
            <p>行业分类</p>
            <p>企业类型</p>
          </van-col>
        </van-row>
      </div>

    </div>
    <!-- 详细信息 -->
    <div class="detailInfo column">
      <h2 class="column-title">详细信息</h2>
      <div class="column-box">
        <van-row>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>工商信息</p>
          </van-col>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>股权构成</p>
          </van-col>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>主要人员</p>
          </van-col>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>对外投资</p>
          </van-col>
        </van-row>
      </div>

    </div>
    <!-- 风险信息 -->
    <div class="detailInfo column">
      <h2 class="column-title">风险信息</h2>
      <div class="column-box">
        <van-row>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>工商信息</p>
          </van-col>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>股权构成</p>
          </van-col>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>主要人员</p>
          </van-col>
          <van-col span="6">
            <p> <van-icon name="send-gift-o" /> </p>
            <p>对外投资</p>
          </van-col>
        </van-row>
      </div>

    </div>
	</div>
</template>

<script>
export default {
  name:'overview',
	components:{

	},
	data () {
		return {

		}
	},
	methods:{

	}
}
</script>

<style lang="scss">
#overview{
  background-color: #F4F5F7;
  .column{
    margin-bottom: 12px;
    background-color: #FFF;
    color: #4E5464;
  }
  .column-title{
    height: 42px;
    line-height: 42px;
    font-weight: 600;
    padding: 0 16px;
    font-size: 16px;
    border-bottom: 1px solid #F5F5F5;
    color: #111A34;
  }
  .column-box{
    padding: 16px;
  }
  .company-header{
    padding-top: 16px;
    .van-col--4{
      text-align: center;
      img{
        width: 40px;
        border: 1px solid #DDDDDD;
        border-radius: 3px;
      }
    }
    .van-col--20{
      .van-tag{
        margin-right: 6px;
      }
      p{
        margin-bottom: 8px;
      }
    }
    .column-3{
      padding: 10px 20px;
      text-align: center;
      .van-col{
        p{
          margin-bottom: 6px;
          &:nth-of-type(1){
            color: #858B9C;
          }
        }
      }

    }
  }
  .abstract{
    .van-row{
      margin-bottom: 20px;
    }
    .van-col--12{
      padding-left: 4px;
      &:nth-of-type(1){
        // border-right: 1px solid #F5F5F5;
      }
      p{
        margin-bottom: 6px;
        &:nth-of-type(1){
          color: #858B9C;
        }
      }
    }
  }
  .detailInfo{
    .column-box{
      .van-row{
        padding-bottom: 16px;
        border-bottom: 1px solid #F5F5F5;
      }
      .van-col--6{
        padding: 10px;
        border-right: 1px solid #F5F5F5;
        p{
          text-align: center;
          
        }
        &:last-child{
          border-right: none;
        }
      }
    }
  }
}
</style>
